<script setup>
import { InfoFilled, Plus} from '@element-plus/icons-vue'
import axios from "axios";
import QuillEditor from '@/components/QuillEditor.vue';
import { onMounted, ref } from "vue";
let heartknowledgeArray = ref([]);
let url = ref('http://localhost:80/file/downLoad?fileName=')
let clicked = ref(false)
const total = ref(0);
const imageUrl = ref('')
const heartVisible = ref(false)
const heartknowledge1= ref({
  
  simplyIntroduce: "",

  text: "",
})
let heartknowledge = ref({
  id: "",
  name: "",
  simplyIntroduce: "",
  img: "",
  text: "",
})
let isTrue = ref(false)
let isTrue1 = ref(false)
const close1=()=>{
  // heartVisible.value = false;
  heartknowledge1.value = {
    simplyIntroduce: "",
    text: "",
  }
  // isTrue.value = false;
  // isTrue1.value = false;
}
const istrue = (n,row) => {
  // heartknowledge1.value = {
  //   simplyIntroduce: "",
  //   text: "",
  // },
  isTrue.value = false;
  isTrue1.value = false;

  if(n==1){heartVisible.value = true;
 isTrue.value = true;
 heartknowledge1.value.simplyIntroduce = row.simplyIntroduce;
}else if(n==2){
  heartVisible.value = true;
  isTrue1.value = true;
  heartknowledge1.value.text = row.text;
}
  
}



//动态对象：分页
const queryInfo = ref({
  pageNum: 1,
  pageSize: 2,
  name: "",
  // turl:'',
})
let heartknowledgeImg = ref('')
let len = ref(0);
// len.value=tableData.value.length
let isEdit = ref(false);
//分页方法
const handleSizeChange = (val) => {
  queryInfo.value.pageSize = val;
  queryInfo.value.pageNum = 1;
  get();
}
const handleCurrentChange = (val) => {
  queryInfo.value.pageNum = val;
  get();
}

const searchName = () => {
  get();
}
const get = () => {
  axios.get("/heartKnowledge/findByName",
    { params: queryInfo.value }
  )
    .then(res => {
      console.log(res.data.data)
      heartknowledgeArray.value = res.data.data.list;
      total.value = res.data.data.total;
    })
    .catch((err) => {
      console.log(err)
    })
}
onMounted(() => {
  get();
})


function onCancel() {
  clicked.value = true
}

const fileList = ref([]);


let c = ref(1)

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const eee = (e) => {
  console.log("e", e)
}
//修改
const updateheartknowledge = (row) => {
  dialogFormVisible.value = true;
  isEdit.value = true;
  console.log(row)
  heartknowledge.value = row;
  fileList.value = [
    {
      name: row.imageUrl,
      url: url.value + row.imageUrl,
    }
  ];
}
//添加
const addheartknowledge = () => {
  dialogFormVisible.value = true;
  isEdit.value = false;
  heartknowledge.value = {
    id: "",
    name: "",
    simplyIntroduce: "",
    img: "",
    text: "",
  }
  fileList.value = [];
}
//图片上传
const handleAvatarSuccess = (response, uploadFile) => {
  heartknowledgeImg.value = URL.createObjectURL(uploadFile.raw);
  // 一旦上传成功，则需要把返回的数据赋值给article.imageUrl
  heartknowledge.value.img = response.data;
  //   console.log('response',response)
  //   console.log('uploadFile',uploadFile)
}
//修改和添加
const save = () => {
  if (!isEdit.value) {
    console.log(isEdit.value);
    axios.post("/heartKnowledge/add", heartknowledge.value)
      .then(res => {
        console.log(res.data.data)
        get();
        dialogFormVisible.value = false;
      })
  }
  else {
    axios.put("/heartKnowledge/update", heartknowledge.value)
      .then(res => {
        console.log(res.data.data)
        get();
        dialogFormVisible.value = false;
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
//删除
const handleDeleteAndCancel = id => {
  axios.delete("/heartKnowledge/" + id)
    .then(res => {
      console.log(res.data.data)
      get();
    })
    .catch((err) => {
      console.log(err)
    });
  cancel();
};
</script>

<template>

  <div>

    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="心理知识类表">
        <el-input v-model="queryInfo.name" placeholder="请输入关键字" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchName">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="mb20">
      <el-button @click="addheartknowledge" type="primary" icon="Plus" plain>新增</el-button>
      <el-button type="danger" icon="Delete" plain>删除</el-button>
    </div>

    <el-table :data="heartknowledgeArray" style="width: 100%">

      <el-table-column fixed prop="id" label="心理知识编号" width="150" />
      <el-table-column prop="name" label="标题" width="140" />
      <el-table-column prop="simplyIntroduce" label="简介" width="300">
        <!-- 对话框 -->
         
        <template #default="scope">
         <!-- <button >详情</button> -->
         <el-button @click="istrue(1,scope.row)" type="primary" plain>详情</el-button>
        </template>


      </el-table-column>
      <el-table-column prop="img" label="图片" width="140">
        <template #default="scope">
          <el-image v-if="scope.row.img" style="width: 100px; height: 100px" :src="url + scope.row.img" :fit='"cover"' />
        </template>
      </el-table-column>
      <el-table-column prop="text" label="详情" width="300">
        <template #default="scope">
     
         <el-button @click="istrue(2,scope.row)" type="primary" plain>简介</el-button>
        </template>
      </el-table-column>


      <el-table-column fixed="right" label="管理" min-width="100">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="updateheartknowledge(scope.row)">
            修改
          </el-button>
          <el-popconfirm width="220" :icon="InfoFilled" icon-color="#626AEF" title="是否删除?" @cancel="onCancel">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
            <template #actions="{ confirm, cancel }">
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button type="danger" size="small" @click="handleDeleteAndCancel(scope.row.id, cancel)">
                确认删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

 
  <el-dialog v-model="heartVisible" :title="isTrue ? '详情' : '添加'" width="500" @click="close1()">
    <el-form :model="heartknowledge1" >
      <el-form-item v-if="isTrue" label="心理简介" :label-width="formLabelWidth">
        <quill-editor v-model:value="heartknowledge1.simplyIntroduce" />
      </el-form-item>
      <el-form-item v-if="isTrue1" label="心理详情" :label-width="formLabelWidth">
        <quill-editor v-model:value="heartknowledge1.text" />
      </el-form-item>
      
    </el-form>
  </el-dialog>
  <!-- 分页 -->
  <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
    :page-sizes="[2, 5, 8, 10]" size="default" background="false" layout="total, sizes, prev, pager, next, jumper"
    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  <div>
    <!-- <el-pagination size="small" layout="prev, pager, next" :total="len" v-model:current-page="c" @update:current-page="" :background="true" /> -->
  </div>
  <el-dialog v-model="dialogFormVisible" :title="isEdit ? '修改' : '添加'" width="500">
    <el-form :model="heartknowledge">
      <el-form-item v-if="isEdit" label="id" :label-width="formLabelWidth">
        <el-input v-model="heartknowledge.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="heartknowledge.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <!-- <el-input v-model="heartknowledge.heartknowledgeImg" autocomplete="off" /> -->
        <el-upload v-model:file-list="fileList" class="avatar-uploader" list-type="picture-card"
          action="http://localhost:80/file/upload" :on-success="handleAvatarSuccess">
          <img v-if="!fileList" :src="heartknowledgeImg" class="avatar" alt="" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="简介" :label-width="formLabelWidth">
        <!-- <el-input v-model="heartknowledge.simplyIntroduce" autocomplete="off" /> -->
        <quill-editor v-model:value="heartknowledge.simplyIntroduce" />
      </el-form-item>
      <el-form-item label="详情" :label-width="formLabelWidth">
        <el-input v-model="heartknowledge.text" autocomplete="off" />
        <quill-editor v-model:value="heartknowledge.text" />
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          {{ isEdit ? '确认修改' : '确认添加' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
.ql-container {
  min-height: 200px;
}
</style>